<template>
	<view>
		<!-- <view class="htt"> -->
		<!-- 商品显示图片 -->
		<view class="goods-img-box" @touchmove="move" @touchstart="down" @touchend="up()">
			<view class="goods-img-body">
				<image v-for="(item, key) in this.goods_img" :src="item.img" :style="
            'width:' +
            base.frame_num * 420 +
            'upx;left:' +
            img_index * -420 +
            'upx'
          " class="goods-img"></image>
			</view>
			<view class="goods-trans goods-set-icon" @tap="transImg()">
				<!-- <view style="height: 13upx;"></view> -->
				<i class="icon">&#xe6ef;</i>
				<view>旋转</view>
			</view>
			<view class="goods-reset goods-set-icon" @tap="reset()">
				<!-- <view style="height: 13upx;"></view> -->
				<i class="icon">&#xe633;</i>
				<view>重置</view>
			</view>
			<view style="top: 280rpx" class="goods-reset goods-set-icon" @tap="open()">
				<!-- <view style="height: 13upx;"></view> -->
				<image style="width: 40rpx; height: 40rpx; left: 28rpx" src="../../static/image/foot.png"></image>
				<view>脚型</view>
			</view>
			<!--  -->
			<view class="goods-star goods-set-icon" v-if="is_same && star_list.length > 0" @tap="changeStar()">
				推荐配色 <image src="../../static/image/order/t_jt.png" mode=""></image>
				<!-- <i class="icon_t">&#xe613;</i> -->
			</view>
		</view>
		<!-- 鞋类左右脚定制 -->
		<view class="shoes-made" v-if="base.is_foot">
			<view class="shoes-switch">
				<switch :checked="is_same ? true : false" class="shoes-check" @change="changeSame" />
				<text v-if="is_same">左右脚相同</text>
				<text v-else>左右脚不同</text>
			</view>
			<view :class="shoesLeft()" @tap="changeShoes(0)">
				<view class="no-shoes">
					<text>左脚</text>
				</view>
				<i class="icon">&#xe6ad;</i>
			</view>
			<view :class="shoesRight()" @tap="changeShoes(1)">
				<view class="no-shoes">
					<text>右脚</text>
				</view>
				<i class="icon">&#xe6ad;</i>
			</view>
		</view>
		<view class="line_fg" v-else> </view>
		<!-- 商品名称 -->
		<view class="goods-name-box" :style="change_size ? 'border:none' : ''">
			<view class="goods-name-body">
				<view class="goods-name">{{ base.name }}</view>
				<view class="goods-price-box">
					<text class="goods-price">￥{{
              (parseFloat(base.price) + made_price + word_price).toFixed(2)
            }}</text>
					<!-- <text class="goods-price-line">￥{{base.line_price}}</text> -->
				</view>
			</view>
			<view class="goods-size" @tap="changeSize()">
				<view class="goods-size-change" @click="flagArrow = !flagArrow">
					<text>{{
            size_index < 0 ? "选择尺码" : "尺码：" + size[size_index]
          }}</text>
					<!-- <i class="icon">&#xe613;</i> -->
					<image v-if="flagArrow" src="../../static/image/produce/xx.png" mode=""></image>
					<image v-else src="../../static/image/produce/xs.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 尺码选择 -->
		<view :class="change_size ? 'size-change size-change-active' : 'size-change'">
			<view class="size-list">
				<view @tap="selectSize(key)" :class="size_index == key ? 'size-item active' : 'size-item'"
					v-for="(item, key) in size">{{ item }}</view>
			</view>
		</view>
		<!-- 规格 型号 -->
		<view class="goods-guige">
			<!-- 部件 -->
			<view class="goods-form-item" v-if="made.unit.length >1 ">
				<view class="goods-form-title">部件</view>
				<scroll-view :scroll-x="true" class="goods-detail-scroll">
					<view class="detial-scroll-item unit-item" v-for="(item, key) in made.unit" @tap="changeUnit(key)">
						<view :class="
                unit_index == key ? 'unit-img-box active' : 'unit-img-box'
              ">
							<image :src="item.img" class="unit-img"></image>
							<view :class="
                  unit_index == key ? 'unit-dir unit-dir-active' : 'unit-dir'
                "></view>
						</view>
						<view :class="unit_index == key ? 'unit-name name-acitve' : 'unit-name'">{{ item.name }}</view>
					</view>

				</scroll-view>

			</view>
			<!-- <view
	    class="detial-scroll-item unit-item"
	    @click="dialogWord()"
	    v-if="this.base.is_word"
	  >
	    <view class="unit-img-box unit-img-box_f">
	      <image
	        src="../../static/word.png"
	        mode="widthFix"
	        class="unit-img"
	      ></image>
	      <view class="unit-dir"></view>
	    </view>
	    <view class="unit-name">个性刺绣</view>
	  </view> -->
			<!-- 材质 -->
			<view class="goods-form-item" v-if="made.material[unit_index].length > 1">
				<view class="goods-form-title">材质</view>
				<scroll-view :scroll-x="true" class="goods-detail-scroll">
					<view @tap="changeMaterial(key)" :class="
              material_index == key
                ? 'detial-scroll-item material-item material-active'
                : 'detial-scroll-item material-item'
            " v-for="(item, key) in made.material[unit_index]">{{ item.name }}</view>
				</scroll-view>
			</view>
			<!-- 颜色 -->
			<view class="goods-form-item">
				<view class="goods-form-title">颜色</view>
				<scroll-view :scroll-x="true" class="goods-detail-scroll">
					<view @tap="changeColor(key)" style="" :style="color_index == key ? 'border-color:red': ''"
						class="detial-scroll-item color-item color-item-active"
						v-for="(item, key) in made.color[unit_index][material_index]">
						<!-- <view class="color-show" :style="'background:' + item.color"></view> -->
						<text :style="'color:#666;'">{{ item.name }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 商品详情、商品评价 -->
		<view :class="bottom_fixed ? 'goods-bottom bottom-true' : 'goods-bottom'" ref="bottom">
			<view @click="changeBottom(key)" :class="
          bottom_index == key ? 'goods-bottom-item active' : 'goods-bottom-item'
        " v-for="(item, key) in bottom_tab">{{ item }}
				<view class="line_cha"> </view>
			</view>
			<!-- 下划线 -->
			<!-- <view class="bottom-line" :style="'left:'+(187.5 * ((bottom_index * 2) + 1) - 30)+'upx'"></view> -->
		</view>
		<view class="goods-de-ev">
			<view v-if="bottom_index == 0">
				<goods-detail :detail="base.detail"></goods-detail>
			</view>
			<view v-else>
				<goods-eval :eval_list="eval_list"></goods-eval>
				<view class="more-eval" @tap="moreEval()" v-if="this.eval_list.length >= 5">
					<text>查看更多评价</text>
					<i class="icon">&#xe638;</i>
				</view>
				<view class="no-eval" v-else-if="!this.eval_list.length">
					<text>暂无评价</text>
				</view>
			</view>
		</view>
		<!-- 占位符 -->
		<view style="width: 100%; height: 140upx"></view>
		<!-- 商品操作 -->
		<view class="goods-handl">
			<template v-if="!cart_id">
				<view class="cart-num" @tap="toCart()">
					<!-- <i class='icon'>&#xe673;</i> -->
					<image src="../../static/tabbar-img/02_2.png" mode=""></image>
					<view class="cart-num-name">购物车</view>
					<view class="cart-num-num" v-if="cart_num">{{ cart_num }}</view>
				</view>
				<view class="cart-num" @tap="toCollect()">
					<image src="../../static/tabbar-img/shouchang2.png" mode="aspectFill" v-if="is_collect==1"></image>
					<image src="../../static/tabbar-img/shouchang.png" mode="aspectFill" v-else></image>
					<view class="cart-num-name">收藏</view>
				</view>
				<view class="add-cart" @tap="submit(1)">加入购物车</view>
				<view class="add-order" @tap="submit(2)">立即购买</view>
			</template>
			<template v-esle>
				<view class="cart-handle">
					<view class="cancle-cart" @tap="cancleCart()">取消</view>
					<view class="update-cart" @tap="submit(3)">更新设计</view>
				</view>
			</template>
		</view>
		<!-- 尺码选择 -->
		<goods-dialog @close="closeDialog" v-if="dialog" :title="dialog_title">
			<view class="star-list" v-if="dialog_state == 2">
				<view class="star-item" v-for="item in star_list" @click="setStar(item)">
					<img v-for="(items, keys) in item" :src="items.img" />
				</view>
			</view>
		</goods-dialog>
		<!-- </view> -->
		<!-- 个性刺绣 -->
		<goods-word title="刺绣" @close="closeWord()" v-if="dialog_word">
			<!-- 效果展示图 -->
			<view class="word-form-item-result">
				<image :src="$img_src + words[word_index].img" mode=""></image>
				<view class="word-form-item-result-con" :style="
            'left:' +
            dx +
            'px;top:' +
            dy +
            'px;transform:rotate(' +
            angle +
            'deg)'
          ">
					<span v-if="!word_made[word_index].family_index" class="black">{{
            word_made[word_index].txt
          }}</span>
					<span v-else-if="word_made[word_index].family_index == 1"
						class="li">{{ word_made[word_index].txt }}</span>
					<span v-else class="kai">{{ word_made[word_index].txt }}</span>
				</view>
			</view>
			<view class="word-form-item">
				<view class="word-form-label">刺绣区域：</view>
				<view class="word-form-content">
					<radio-group @change="changeWordArea">
						<template v-for="(item, key) in word_made">
							<radio :value="key.toString()" :checked="key == word_index ? true : false"
								class="radio-word" />
							{{ item.name }}
						</template>
					</radio-group>
				</view>
			</view>
			<view class="word-form-item">
				<view class="word-form-label">区域价格：</view>
				<view class="word-form-content">
					<text class="word-price">
						<text v-if="word_made[word_index].price > 0">￥{{ word_made[word_index].price }}</text>
						<text v-else>免费</text>
					</text>
				</view>
			</view>
			<view class="word-form-item">
				<view class="word-form-label">选择字体：</view>
				<view class="word-form-content">
					<view @tap="changeFont(item)" v-for="item in font_list" :class="
              item == word_made[word_index].font
                ? 'word-style word-style-active'
                : 'word-style'
            ">{{ item }}</view>
				</view>
			</view>
			<!-- 绣字 -->
			<view class="word-input-box">
				<input type="text" placeholder="请输入个性签名" @blur="tips" @input="inputFont" class="word-input"
					v-model="word_made[word_index].txt" />
				<view class="word-tag">
					<text>*</text>
					<text>最多4个字符，包含数字、字母、汉字</text>
				</view>
			</view>
			<!-- 绣字按钮 -->
			<view class="word-btns">
				<view class="word-price-total">
					<text class="price-total-name">合计：</text>
					<text class="word-price-num">￥{{ word_price }}</text>
				</view>
				<view class="word-true-btn" @tap="trueWords()">确认刺绣</view>
			</view>
		</goods-word>
		<!-- 遮罩层 -->
		<view class="goods-model" v-if="loading"> </view>
		<web-load v-if="loading"></web-load>
		<foot :info="footInfo" v-if="isShow" @close="closeisShow" animation="bottomInTop 0.4s"></foot>
	</view>
</template>

<script>
	import webLoad from "../../components/unit/loading.vue";
	import goodsDetail from "../../components/goods/detail.vue";
	import goodsEval from "../../components/goods/eval.vue";
	import goodsDialog from "../../components/unit/dialog.vue";
	import goodsWord from "../../components/unit/dialog-word.vue";
	import foot from "../../components/popup/foot.vue";
	export default {
		components: {
			goodsDetail,
			goodsEval,
			goodsDialog,
			goodsWord,
			webLoad,
			foot,
		},
		onPageScroll(e) {
			//获取详情tab到顶部的距离
			if (!this.bottom_fixed) {
				this.bottom_top = this.$refs["bottom"].$el.offsetTop;
			}
			//获取当前页面滚动高度
			var height_scroll = e.scrollTop;
			this.bottom_fixed = height_scroll >= this.bottom_top ? true : false;
		},
		data() {
			return {
				isShow: false,
				// maxlength 绣字的最大输入
				disabled: false,
				// 文字的左定位距离
				dx: 0,
				dy: 0,
				angle: 0,
				// 判断刺绣文字的字体
				family_index: 0,
				// 绣字
				write: "",
				//绣字的长度
				writeLength: 0,
				loading: true,
				flagArrow: true, //选择尺码的箭头方向
				bottom_fixed: false,
				bottom_top: 0,
				is_same: true,
				shoes_dir: 0, //鞋子方向，0左脚，1右脚
				bottom_tab: ["商品详情", "商品评价"],
				bottom_index: 0,
				dialog: false,
				dialog_state: 1,
				dialog_title: "尺码",
				dialog_word: false,
				goods_id: 0,
				base: {},
				made: {
					unit: [],
					material: [
						[]
					],
					color: [
						[
							[]
						]
					],
				},
				made_price: 0,
				words: {},
				size: [],
				change_size: false,
				size_index: -1,
				real_price: 0,
				unit_index: 0,
				material_index: 0,
				color_index: 0,
				goods_img: [],
				img_index: 0,
				mouse_state: 0,
				mouse_way: 0,
				font_list: ["黑体", "隶书", "华文行楷"],
				word_made: [],
				word_index: 0,
				word_price: 0,
				word_temp: "",
				material_price: 0,
				foot_arr: [
					[],
					[]
				],
				foot_start: [],
				cart_num: "",
				cart_id: 0,
				eval_list: [],
				star_list: [],

				footInfo: {},
				is_collect: 0,
			};
		},
		onLoad(e) {
			this.goods_id = e.goods_id;
			this.cart_id = e.cart_id;
			if (this.cart_id == undefined) this.cart_id = 0;
			this.getData();

			this.getFootData(1);
		},
		methods: {
			closeisShow() {
				this.isShow = false
			},
			getFootData(status) {
				// status==1刚进页面的判定的 ,==2 是脚型弹窗
				if (status == 2) {
					uni.showLoading({
						title: "数据加载中"
					})
				}
				uni.request({
					url: "/phone/goods/getFootData",
					method: "POST",
					data:{id:this.goods_id},
					success: (res) => {
						if (res.data.code == 1) {
							if (status == 2) {
								this.footInfo = res.data.msg;
								this.isShow = true
								uni.hideLoading()
							} else {
								this.footInfo = res.data.msg;
								uni.showModal({
									title: "提示",
									content: res.data.msg.msg,
									confirmText: "选择",
									success: (res2) => {
										if (res2.confirm) {
											this.change_size = true;
											this.size_index = this.size.findIndex(
												(item) => item == res.data.msg.recommend
											);
										} else if (res2.cancel) {
											this.change_size = true;
										}
									},
								});
							}
						} else {
							this.change_size = true;
							if (status == 2) {
								this.toast('暂无鞋码信息')
								uni.hideLoading()
							}
						}
					},
				});
			},
			//设置明星配色
			setStar(data) {

				this.goods_img = data;
				this.foot_start = JSON.parse(JSON.stringify(this.goods_img));
				this.foot_arr = [this.foot_start, this.foot_start];
				this.unit_index = 0;
				this.material_index = 0;
				this.color_index = 0;
				this.img_index = this.made.unit[0].start;
				//初始化商品总价格
				this.setMaterialPrice();
				this.$forceUpdate();
				this.dialog = false;
			},
			//更多评价
			moreEval() {
				uni.navigateTo({
					url: "/pages/goods/eval?goods_id=" + this.goods_id,
				});
			},
			//获取购物车定制信息
			getCartInfo() {
				console.log('获取购物车信息');
				this.ajax("cart/getCartInfo", {
					data: {
						id: this.cart_id,
					},
					success: (res) => {
						console.log(res);
						uni.showLoading({
							title: "正在还原设置",
						});
						var data = res.msg;
						//判断是否左右脚相同
						this.is_same = data.is_same;
						this.real_price = data.goods_price;
						//设置尺码
						for (var i in this.size) {
							if (this.size[i] == data.size) {
								this.size_index = i;
							}
						}
						//设置左右脚
						this.foot_arr = this.is_same ? [
							[],
							[]
						] : data.made_info;
						//设置商品初始化话图片
						if (this.is_same) data.made_info[1] = data.made_info[0];
						for (var y in data.made_info) {
							var temp_made = data.made_info[y];
							var made_temp = [];
							if (y == 0) this.goods_img = [];
							for (var i in temp_made) {
								var unit_index = 0;
								for (var x in this.made.unit) {
									if (this.made.unit[x].id == temp_made[i].unit_id) {
										unit_index = x;
									}
								}
								var material_index = 0;
								var material = this.made.material[unit_index];
								for (var x in material) {
									if (material[x].id == temp_made[i].material_id) {
										material_index = x;
									}
								}
								var color_index = 0;
								var color = this.made.color[unit_index][material_index];
								for (var x in color) {
									if (color[x].id == temp_made[i].color_id) {
										color_index = x;
									}
								}
								var img_temp = {
									unit_index: unit_index,
									material_index: material_index,
									color_index: color_index,
									img: temp_made[i].img,
									price: temp_made[i].price,
								};
								if (i == 0 && y == 0) {
									this.unit_index = unit_index;
									this.material_index = material_index;
									this.color_index = color_index;
								}
								if (y == 0) {
									this.goods_img.push(img_temp);
								}
								made_temp.push(img_temp);
							}
							this.foot_arr[y] = made_temp;
						}
						//设置定制材质价格
						this.setMaterialPrice();
						//设置绣字
						this.word_made = data.words_info;
						console.log(this.word_made);
						//设置绣字价格
						this.setWordPrice();
						setTimeout(() => {
							uni.hideLoading();
						}, 1000);
					},
				});
			},
			//去购物车页
			toCart() {
				uni.switchTab({
					url: "/pages/cart/index",
				});
			},
			// 判断绣字长度
			tips() {
				// console.log(this.write.GetLen())
				if (this.writeLength > 8) return this.toast("最多输入4个字符");
			},
			//获取购物车数量
			getCartNum() {
				this.ajax("goods/getCartNum", {
					success: (res) => {
						this.cart_num = res.msg;
					},
				});
			},

			toCollect() {
				this.ajax("cart/collectGoods", {
					data: {
						id: this.goods_id
					},
					success: (res) => {
						this.toast(res.msg)
						if (res.code == 1) {
							this.is_collect == 1 ? this.is_collect = 0 : this.is_collect = 1
						}
					}
				});
			},

			//添加购物车，订单
			submit(param) {
				if (this.size_index < 0) return this.toast("请选择尺码");
				//初始化左右脚定制
				var foot_arr = this.foot_arr;
				if (this.is_same) {
					//如果左右脚相同
					foot_arr = [this.goods_img, this.goods_img];
				}
				//重新组装定制信息
				var foot_one = [];
				var foot_two = [];

				for (var i in foot_arr[0]) {
					var unit_index = foot_arr[0][i].unit_index;
					var material_index = foot_arr[0][i].material_index;
					var color_index = foot_arr[0][i].color_index;
					var foot_one_temp = {
						unit_id: this.made.unit[unit_index].id,
						material_id: this.made.material[unit_index][material_index].id,
						color_id: this.made.color[unit_index][material_index][color_index].id,
						img: foot_arr[0][i].img,
					};
					foot_one.push(foot_one_temp);
				}
				console.log(foot_one);
				if (this.is_same) {
					foot_two = foot_one;
				} else {
					//左右脚不同
					for (var i in foot_arr[1]) {
						var unit_index = foot_arr[1][i].unit_index;
						var material_index = foot_arr[1][i].material_index;
						var color_index = foot_arr[1][i].color_index;
						var foot_one_temp = {
							unit_id: this.made.unit[unit_index].id,
							material_id: this.made.material[unit_index][material_index].id,
							color_id: this.made.color[unit_index][material_index][color_index].id,
							img: foot_arr[1][i].img,
						};
						foot_two.push(foot_one_temp);
					}
				}
				foot_arr = [foot_one, foot_two];
				var goods_info = [];
				//处理绣字信息
				var words = [];
				if (this.word_made.length) {
					for (var i in this.word_made) {
						words.push({
							id: this.word_made[i].id,
							font: this.word_made[i].font,
							txt: this.word_made[i].txt,
						});
					}
				}
				//组装数据传递到服务端
				var res = {
					is_same: this.is_same ? 1 : 0,
					foot_arr: foot_arr,
					size: this.size[this.size_index],
					words: words,
					goods_id: this.goods_id,
				};
				//判断左右脚定制是否完成
				if (param == 1) {
					//添加购物车
					this.ajax("cart/addCart", {
						data: res,
						success: (res) => {
							if (res.code == 2) {
								// setTimeout(()=>{

								// },2000)
								uni.showModal({
									title: "温馨提示",
									content: "该商品需平台认证资质购买",
									confirmText: "去认证",
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: "../performance/index",
											});
										} else if (res.cancel) {}
									},
								});
								return false;
								//return this.toast(res.msg);
							} else if (res.code == 1) {
								this.toast(res.msg)
								return false;
							} else {
								uni.showModal({
									title: "温馨提示",
									content: res.msg,
									showCancel: false,
									success: (res) => {
										if (res.confirm) {} else if (res.cancel) {}
									},
								});
								return false;
							}

							this.getCartNum();
						},
					});
				} else if (param == 2) {
					//添加订单
					this.ajax("order/createOrder", {
						data: res,
						success: (res) => {
							if (res.code == 2) {
								uni.showModal({
									title: "温馨提示",
									content: "该商品需平台认证资质购买",
									confirmText: "去认证",
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: "../performance/index",
											});
										} else if (res.cancel) {}
									},
								});
								return false;
							}
							if (res.code) {
								uni.navigateTo({
									url: "/pages/order/add?order_id=" + res.msg,
								});
							} else {
								return uni.showModal({
									title: "温馨提示",
									content: res.msg,
									showCancel: false,
									success: (res) => {
										if (res.confirm) {} else if (res.cancel) {}
									},
								});
							}
						},
					});
					/* uni.navigateTo({
						url:'/pages/order/add'
					}) */
				} else if (param == 3) {
					//更新购物车
					res.cart_id = this.cart_id;
					this.ajax("cart/addCart", {
						data: res,
						success: (res) => {
							this.toast(res.msg);
							if (res.code) {
								setTimeout(() => {
									console.log(1);
									uni.switchTab({
										url: "/pages/cart/index",
									});
								}, 1000);
							}
						},
					});
				}
			},
			//图片旋转
			transImg() {
				if (this.img_index < this.base.frame_num - 1) this.img_index++;
				else this.img_index = 0;
			},
			//重置定制
			reset() {
				uni.showModal({
					title: "提示",
					content: "确定重置所有？",
					success: (res) => {
						if (res.confirm) {
							console.log(1);
							this.goods_img = [];
							this.startGoodsImg();
							this.unit_index = 0;
							this.material_index = 0;
							this.color_index = 0;
							this.img_index = 0;
						} else if (res.cancel) {}
					},
				});
			},
			open() {
				this.getFootData(2);
			},
			// closeFoot() {
			//   this.isShow = !this.isShow;
			// },
			//获取页面加载事件
			getData() {
				this.ajax("goods/goodsInfo", {
					data: {
						id: this.goods_id,
					},
					success: (res) => {
						console.log(res);
						if (!res.code) {
							this.toast(res.msg);
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
							return false;
						}
						this.is_collect = res.msg.is_collect
						this.base = res.msg.base;
						this.made = res.msg.made;
						this.words = res.msg.words;
						this.eval_list = res.msg.eval;
						// console.log(this.eval_list)
						this.size = res.msg.size;
						this.real_price = res.msg.base.price;
						//初始化商品图片
						this.startGoodsImg();
						//初始化绣字
						this.startWords();
						//初始化商品价格
						this.setGoodsPrice();
						//获取购物车数量
						this.getCartNum();
						//获取购物车信息
						if (this.cart_id) this.getCartInfo();
						//初始化明星配色
						this.startStar(res.msg.star);
						console.log(this.startStar.length);
						this.loading = false;
					},
				});
			},
			//初始化明星配色
			startStar(data) {
				var made_arr = [];
				for (var i in data) {
					made_arr.push(data[i].sku.made);
				}
				var star_arr = [];
				for (var x in made_arr) {
					var star_temp = [];
					for (var y in made_arr[x]) {
						var unit_index = made_arr[x][y].unit_index;
						var material_index = made_arr[x][y].material_index;
						var color_index = made_arr[x][y].color_index;
						var temp = {
							unit_index: unit_index,
							material_index: material_index,
							color_index: color_index,
							img: this.made.color[unit_index][material_index][color_index].img,
							price: parseFloat(
								this.made.material[unit_index][material_index].price
							),
						};
						star_temp.push(temp);
					}
					star_arr.push(star_temp);
				}
				this.star_list = star_arr;
				console.log(this.star_list)
			},
			//初始化绣字信息
			startWords() {
				for (var i in this.words) {
					this.word_made.push({
						id: this.words[i].id,
						coor: this.words[i].coor,
						name: this.words[i].name,
						angle: this.words[i].angle,
						price: this.words[i].price,
						font: "黑体",
						txt: "",
					});
				}
			},
			//初始化商品图片
			startGoodsImg() {
				this.goods_img = [];
				this.foot_start = [];
				for (var i in this.made.unit) {
					var temp = {
						unit_index: i,
						material_index: 0,
						color_index: 0,
						img: this.made.color[i][0][0].img,
						price: parseFloat(this.made.material[i][0].price),
					};
					this.goods_img.push(temp);
				}
				console.log(this.goods_img);
				this.foot_start = JSON.parse(JSON.stringify(this.goods_img));
				this.foot_arr = [this.foot_start, this.foot_start];
				this.unit_index = 0;
				this.material_index = 0;
				this.color_index = 0;
				this.img_index = this.made.unit[0].start;
				//初始化商品总价格
				this.setMaterialPrice();
				this.$forceUpdate();
			},
			//更换定制操作
			changeSame(e) {
				uni.showModal({
					title: "提示",
					content: "是否切换，切换后原定制将被初始化",
					success: (res) => {
						this.is_same = e.detail.value;
						this.shoes_dir = 0;
						if (res.confirm) {
							//初始化左右脚
							this.startGoodsImg();
						} else if (res.cancel) {
							setTimeout(() => {
								this.is_same = e.detail.value ? false : true;
							});
						}
						//重置材质价格
						this.setMaterialPrice();
					},
				});
			},
			//左脚样式
			shoesLeft() {
				if (this.is_same) {
					return "shoes-left";
				}
				if (!this.is_same && this.shoes_dir == 0) {
					return "shoes-left shoes-no-same shoes-select";
				}
				if (!this.is_same && this.shoes_dir == 1) {
					return "shoes-left shoes-no-same";
				}
			},
			//右脚样式
			shoesRight() {
				if (this.is_same) {
					return "shoes-right";
				}
				if (!this.is_same && this.shoes_dir == 0) {
					return "shoes-right shoes-no-same";
				}
				if (!this.is_same && this.shoes_dir == 1) {
					return "shoes-right shoes-no-same shoes-select";
				}
			},
			//切换左右脚
			changeShoes(state) {
				if (this.is_same) return false;
				if (this.shoes_dir == state) return false;
				this.shoes_dir = state;
				var len = this.foot_arr[this.shoes_dir].length;
				if (!len) {

					this.startGoodsImg();
					this.foot_arr[this.shoes_dir] = this.goods_img;
				} else {
					//初始化定制数据

					console.log(this.foot_arr);
					this.goods_img = this.foot_arr[this.shoes_dir];
					this.unit_index = 0;
					this.material_index = this.goods_img[0].material_index;
					this.color_index = this.goods_img[0].color_index;
					//初始化视角
					this.img_index = this.made.unit[0].start;
				}
			},
			//保存左右脚信息
			saveFootInfo() {
				if (!this.is_same) {
					this.foot_arr[this.shoes_dir] = this.goods_img;
				} else {
					this.foot_arr = [this.goods_img, this.goods_img];
				}
				console.log(this.foot_arr)
				//重新设定价格
				this.setMaterialPrice();
			},
			//切换详情，评价tab
			changeBottom(key) {
				this.bottom_index = key;
			},
			//关闭模态框
			closeDialog(e) {
				this.dialog = false;
			},
			//选择尺码
			changeSize() {
				this.change_size = this.change_size ? false : true;
			},
			//确认选择尺码
			selectSize(key) {
				this.flagArrow = true;
				this.size_index = key;
				this.change_size = false;
			},
			//选择明星配色
			changeStar() {
				this.dialog_state = 2;
				this.dialog_title = "推荐配色";
				this.dialog = true;
			},
			//关闭刺绣
			closeWord() {
				this.dialog_word = false;
				this.word_made = JSON.parse(this.word_temp);
				//设置绣字价格
				this.setWordPrice();
			},
			//设置刺绣
			dialogWord() {
				this.word_index = 0;
				this.dx = 250 / this.words[this.word_index].dX;
				this.dy = 250 / this.words[this.word_index].dY - 5;
				this.angle = this.words[this.word_index].angle;
				console.log(this.dy);
				this.dialog_word = true;
				// const move = document.querySelector('.htt')
				// move.addEventListener('touchstart', e => {
				// 	  e.preventDefault()
				// 	  // console.log(e)
				// 	}, false)
				this.word_temp = JSON.stringify(this.word_made);
				//设置绣字价格
				this.setWordPrice();
				// move.addEventListener('touchmove', e => {
				// 	  // e.preventDefault()
				// 	  console.log(e)
				// 	}, true)
			},
			//选择部件
			changeUnit(key) {
				this.unit_index = key;
				var temp = this.goods_img[this.unit_index];
				this.material_index = temp.material_index;
				this.color_index = temp.color_index;
				//获取初始视角
				var start = this.made.unit[key].start;
				var time = setInterval(() => {
					if (this.img_index > start) {
						this.img_index--;
					}
					if (this.img_index < start) {
						this.img_index++;
					}
					if (this.img_index == start) {
						clearInterval(time);
					}
				}, 20);
				//初始化商品价格
				this.setGoodsPrice();
			},
			//选择材质
			changeMaterial(key) {
				this.material_index = key;
				this.color_index = 0;
				//this.setGoodsPrice();
				//获取材质当前的价格
				var material_price = parseFloat(
					this.made.material[this.unit_index][this.material_index].price
				);
				this.goods_img[this.unit_index].price = material_price;
				//console.log(this.foot_arr);
				//this.setGoodsPrice();
				this.changeGoodsImg();
			},
			//设置材质价格
			setMaterialPrice() {
				var price_arr = [];
				for (var i in this.foot_arr) {
					for (var x in this.foot_arr[i]) {
						if (!price_arr[x]) price_arr[x] = [];
						price_arr[x][i] = parseFloat(this.foot_arr[i][x].price);
					}
				}
				this.made_price = 0;
				for (var y in price_arr) {
					this.made_price +=
						price_arr[y][0] > price_arr[y][1] ? price_arr[y][0] : price_arr[y][1];
				}
				console.log(this.made_price)
			},
			//选择颜色
			changeColor(key) {

				this.color_index = key;
				this.changeGoodsImg();
			},
			//改变商品图片
			changeGoodsImg() {
				this.goods_img[this.unit_index] = {
					unit_index: this.unit_index,
					material_index: this.material_index,
					color_index: this.color_index,
					img: this.made.color[this.unit_index][this.material_index][
						this.color_index
					].img,
					price: this.made.material[this.unit_index][this.material_index].price,
				};
				this.saveFootInfo();
			},
			//移动图片
			move(e) {
				console.log(e)
				if (this.mouse_state) {
					e = e.touches[0];
					//右旋转
					if (e.clientX > this.mouse_way) {
						if (this.img_index < this.base.frame_num - 1) this.img_index++;
						else this.img_index = 0;
						this.mouse_way = e.clientX;
					} else if (e.clientX < this.mouse_way) {
						//做旋转
						if (this.img_index > 0) this.img_index--;
						else this.img_index = this.base.frame_num - 1;
						this.mouse_way = e.clientX;
					}
				}
			},
			//按下
			down(e) {
				e = e.touches[0];
				this.mouse_state = 1;
				this.mouse_way = e.clientX;
			},
			//放开
			up() {
				this.mouse_state = 0;
			},
			//更换绣字区域
			changeWordArea(e) {
				// console.log(e)
				this.word_index = e.detail.value;
				// console.log(this.words[this.word_index].dX)
				// this.dx =
				// var word-form-item-result-con =
				this.dx = 250 / this.words[this.word_index].dX;
				this.dy = 250 / this.words[this.word_index].dY - 5;
				this.angle = this.words[this.word_index].angle;
			},
			//选择绣字字体
			changeFont(font) {
				if (font == "黑体") this.word_made[this.word_index].family_index = 0;
				if (font == "隶书") this.word_made[this.word_index].family_index = 1;
				if (font == "华文行楷") this.word_made[this.word_index].family_index = 2;
				console.log(this.word_made[this.word_index].family_index);
				this.word_made[this.word_index].font = font;
			},
			//绣字
			inputFont(e) {
				// if(e.detail.value.length == 1 && this.word_made[this.word_index].txt.length < e.detail.value.length) {
				// 	this.word_price += parseFloat(this.word_made[this.word_index].price);
				// }
				// if(e.detail.value.length == 0) {
				// 	this.word_price -= parseFloat(this.word_made[this.word_index].price);
				// }
				//初始化商品价格
				//this.setGoodsPrice();
				var w = 0;
				var txt = e.detail.value;
				this.word_made[this.word_index].txt = "";
				this.write = txt;
				for (var i = 0; i < txt.length; i++) {
					var c = txt.charCodeAt(i);
					if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
						w++;
						// console.log(w)
					} else {
						w += 2;
						console.log(w);
					}
					if (w > 7) {
						setTimeout(() => {
							this.word_made[this.word_index].txt = this.write = txt.substr(
								0,
								i + 1
							);
						}, 0);

						return;
					}
				}
				this.word_made[this.word_index].txt = txt;
				// console.log(this.write)
				if (this.write) this.writeLength = this.write.GetLen();
				// if(this.writeLength > 8) {
				// 	 return false
				// }
				//设置绣字价格

				this.setWordPrice();
			},
			//设置绣字的价格
			setWordPrice() {
				this.word_price = 0;
				for (var i in this.word_made) {
					if (this.word_made[i].txt != "")
						this.word_price += parseFloat(this.word_made[i].price);
				}
			},
			//确认绣字
			trueWords() {
				if (this.writeLength > 8) return this.toast("最多输入4个字符");
				this.dialog_word = false;
				this.word_temp = JSON.stringify(this.word_made);
				// var title = document.getElemenByClassName('.word-input-box').value;

				//设置绣字价格
				this.setWordPrice();
			},
			//设定商品价格
			setGoodsPrice() {
				//获取材质价格
				var material_price = 0;
				for (var i in this.goods_img) {
					material_price += parseFloat(this.goods_img[i].price);
				}
				//计算总价格
				this.real_price =
					material_price + parseFloat(this.base.price) + this.word_price;
			},
			//取消购物车更新
			cancleCart() {
				uni.navigateBack();
			},
		},
		watch: {},
	};
</script>

<style>
	@import url("../../static/css/goods/detail.css");
</style>